<template>
  <view class="login flex column justify-center items-center">
    <view class="flex column justify-center items-center">
      <image class="logo" :src="Logo" />
      <view class="login-tit">绯常小店登录</view>
    </view>
    <view class="containe mt-54 w100">
      <view class="view form mt-40 mb-50 px-48 flex column justify-center">
        <up-input
          fontSize="32rpx"
          color="rgba(0, 0, 0, 0.4)"
          placeholder="请输入账号"
          type="number"
          :border="'bottom'"
          v-model="form.username"
        ></up-input>
        <up-input
          fontSize="32rpx"
          color="rgba(0, 0, 0, 0.4)"
          placeholder="请输入密码"
          :border="'bottom'"
          v-model="form.password"
          :type="showbrowse ? 'text' : 'password'"
        >
          <template #suffix>
            <image class="pwicon" v-if="showbrowse" :src="IMG_URL2 + 'login/browse.svg'" @click="changeBrowse" />
            <image class="pwicon" v-else :src="IMG_URL2 + 'login/browse-off.svg'" @click="changeBrowse" />
          </template>
        </up-input>
      </view>
      <view class="choosebox flex items-center px-48 f-28" @click="onCheckDefault">
        <image class="icon-width mr-8" v-if="checked" :src="IMG_URL2 + 'login/checkbox1.svg'" />
        <image class="icon-width mr-8" v-else :src="IMG_URL2 + 'login/checkbox.svg'" />
        <text>我已阅读并同意</text>
        <text class="tip-text" @click.stop="onAgreement">《用户协议》</text>
        <text>和</text>
        <text class="tip-text" @click.stop="onPrivacy">《隐私政策》</text>
      </view>
      <button class="login-btn mt-32 f-32 white" @click="onMobileLogin" :disabled="loading">
        <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
        <text>登录</text>
      </button>
      <view class="divider flex justify-between items-center mt-32 mb-28 px-48">
        <view @click="toNextPage('/pages/login/application')">申请专营商账号</view>
        <view @click="toNextPage('/pages/user/customerservice')">联系客服</view>
      </view>
    </view>
    <PrivacyPop :showPrivacy="showPrivacy" @privacyclose="privacyclose" />
  </view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import { studyApi } from "@/api";
import {setStorage } from "@/utils/storage";
import { setUserInfo } from "@/service";
import PrivacyPop from '@/components/PrivacyPop.vue'

let showPrivacy=ref(false)
import Logo from "@/static/logo.png";
// 13269595515
// 13250176593
// 13661485984
const form = ref({
  username: "19878638899",
  password: "123456"
});
const showbrowse = ref(false);
const checked = ref(false);
const loading = ref(false);


onShow(()=>{
  uni.setStorage({
    key: "historyList",
    data:null,
    success: (res) => {
     
    }
  });
}) 

const privacyclose=()=>{
  showPrivacy.value = false
  wx.openPrivacyContract()
}

const changeBrowse = () => {
  showbrowse.value = !showbrowse.value;
};



// 手机号验证码登录
const onMobileLogin = () => {
  if (!checked.value) {
    uni.showToast({
      title: "阅读并同意《用户协议》和《隐私政策》",
      icon: "none"
    });
    return;
  }
  if (form.value.username.trim() == "") {
    uni.showToast({
      title: "请输入账号",
      icon: "none",
      mask: true
    });
    return;
  }
  if (form.value.password.trim() == "") {
    uni.showToast({
      title: "请输入验证码",
      icon: "none",
      mask: true
    });
    return;
  }
  loading.value = true;
  studyApi.frontLogin(form.value).then((res) => {
    // 1.登录接口返回错误码
    // 10111:需要跳去查询专营商申请信息页面; 
    // 10112:选择店铺 a.shops没有店铺就是提示他暂无店铺信息 联系客服 b.shops有店铺 ，跳转店铺页面
    // 10114 专营商审核不通过，跳转去专营商申请信息
    // 2.登录接口返回字段shops里面有多个店铺，需要弹出选择店铺，如果只有一个店铺，直接登录
    // 3.登录多个店铺的情况下需要调小程序根据店铺id获取token，只有一个店铺的情况下，登录接口会直接返回token

  
    loading.value = false;
    // role 0店长 1店员 2专营商
    if (res.code == 200) {
    	// 用户登录信息保存到本地存储
      setUserInfo(res.result); 
      if(res.result.shops&&res.result.shops.length>0){
        setStorage("shopName", res.result.shops[0].name);
      }
      setStorage("role", res.result.role);
      if (res.result.isFirstLogin == true && res.result.role == 2 && res.result.shops.length > 0) {
        uni.navigateTo({ url: `/pages/login/voucher` });
      } else {
        if (res.result.shops.length > 1) {
          uni.navigateTo({ url: `/pagesshop/shop/chooseshop` });
        } else {
          uni.switchTab({ url: `/pages/index/index` });
        }
      }

    }else if(res.code == 10111){
    	// 需要跳去查询专营商申请信息页面
      uni.navigateTo({ url: `/pages/login/application?type=1` });

    }else if(res.code == 10112){
    	// 选择店铺 
      setUserInfo(res.result);
      if(res.result.shops&&res.result.shops.length>0){
        setStorage("shopName", res.result.shops[0].name);
      }
      setStorage("role", res.result.role);
      if(res.result.shops.length > 0){
        uni.navigateTo({ url: `/pagesshop/shop/chooseshop` });
      }else{
        uni.showToast({
          title: '暂无无店铺，请联系客服',
          icon: "none",
          duration: 1000
        });
      }
    }else if(res.code == 10114){
      // 专营商审核不通过，跳转去专营商申请信息
      uni.navigateTo({ url: `/pages/login/application?id=${res.result.franchiseeApplyRecordId}` });
      return;
    }else{
        uni.showToast({
          title: res.errMsg,
          icon: "none",
          duration: 1000
        });
    }
  });
};

// 选中服务条款
const onCheckDefault = () => {
  checked.value = !checked.value;
};

// 服务条款
const onAgreement = () => {
  uni.navigateTo({ url: `/pages/agreement/index` });
};
const onPrivacy = () => {
    // #ifdef MP
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: res => {
            if (res.needAuthorization) {
                console.log(res,'')
                showPrivacy.value = true
            } else {
                console.log('已授权')
                wx.openPrivacyContract()
            }
        },
        fail: () => {},
        complete:() => {}
    })    
  }
  // #endif
  
  // uni.navigateTo({ url: `/pages/agreement/index` });
};
const toNextPage = (item) => {
  uni.navigateTo({ url: item });
};
</script>

<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.login {
  .logo {
    margin-top: 252rpx;
    width: 120rpx;
    height: 84rpx;
    margin-bottom: 40rpx;
  }

  .login-tit {
    font-family: PingFang SC;
    font-size: 18px;
    line-height: 26px;
    text-align: left;
  }

  .container {
    background: #ffffff;
    height: 100%;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
  }

  .btn-fixed {
    position: fixed;
    bottom: 84rpx;
    width: 100%;
    margin: 0 auto;
  }
  .choosebox {
    color: rgba(0, 0, 0, 0.9);
    font-size: 24rpx;
  }

  .login-btn {
    width: 654rpx;
    height: 92rpx;
    line-height: 92rpx;
    background: #d68e44;
    color: #ffffff;
    text-align: center;
    border-radius: 64px;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    :deep(.loading) {
      margin-right: 20rpx;
    }
  }
  .pwicon {
    width: 48rpx;
    height: 48rpx;
    margin-top: 50rpx;
  }

  .login-btn:after {
    border: none;
  }

  .dy-login-btn {
    width: 654rpx;
    height: 92rpx;
    line-height: 92rpx;
    background: #ffffff;
    color: #ffffff;
    text-align: center;
    border-radius: 64px;
  }

  .dy-login-btn:after {
    border: none;
  }

  .icon-width {
    width: 40rpx;
    height: 40rpx;
  }

  .tip-text {
    color: #d68e44;
  }

  .divider {
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
    font-size: 24rpx;
    .line {
      width: 104rpx;
      height: 1rpx;
      background: #e6e6e6;
    }

    .text {
      color: #c0c4cc;
    }
  }

  .phone {
    color: #c0c4cc;
  }

  :deep(.u-input) {
    padding: 0rpx !important;
    background: #ffffff;
  }

  :deep(.u-input__content) {
    height: 100rpx;
    line-height: 100rpx;
  }

  :deep(.uni-input-wrapper) {
    font-size: 32rpx;
  }
}
</style>
